<script setup>
import { reactive, ref, watch } from 'vue';
import { useBuildAllList, useRepairStatus, useComplainStatus } from '../../../hooks/lq_index';
import { ElMessage } from 'element-plus';
import { editComplainApi, getComplainInfoApi } from '../../../api/complain';
// import ImageUpload from   '../../../components/ImageUpload'
// ==================
const buildList = useBuildAllList()
const repairStatusList = useRepairStatus()
const complainStatusList = useComplainStatus()
//子父通信============
const emit = defineEmits(['updateList'])
// ======= 表单数据 ========= 为了方便重置时取值 做展开操作
const defaultState = {
    community_code: '',
    title: '',
    tel: '',
    is_anonymity: null,
    reason: '',
    an_photo: '',
    status: '',
    qu_photo: '',
    reply: '',
    id: ''
}
const formData = reactive({ ...defaultState })
// 校验规则
const formRules = {
    status: [{ required: true, message: '请选择', trigger: 'change' }],
    reply: [{ required: true, message: '请输入', trigger: 'blur' }],
}
// 表单ref引用
const formRef = ref()
// 弹框控制变量
const isShow = ref(false)

// 回显操作
const replyData = async (id) => {
    let res = await getComplainInfoApi(id)
    Object.assign(formData, res.data)
    // console.log(formData);
    isShow.value = true
}


// 监听富文本回显
const quillRef = ref();

watch(
    () => formData.content,
    async (newVal) => {
        // console.log(newVal);
        if (formData.id) {
            await nextTick();
            quillRef.value.setHTML(newVal);
        }
    }
)

// 修改功能
const onSubmit = async () => {
    try {
        // 表单校验
        await formRef.value.validate()
        // 整理数据
        // 发送请求
        await editComplainApi(toRaw(formData))
        // 消息提示
        ElMessage.success('操作成功')
        // 关闭抽屉
        isShow.value = false
        // 列表更新
        emit('updateList')
    } catch (error) {
        console.log(error);
    }
}
//关闭事件
// const closeHandler = () => {
//     formRef.value.resetFields()
//     Object.assign(formData, { ...defaultState })
// }

// 设置tab栏默认显示模块
const activeName = ref('first')
// ===============VUE3 中组件是封闭的 需要抛出去
defineExpose({
    isShow, replyData
})
</script>

<template>
    <el-drawer size="45%" v-model="isShow" title="回复投诉">
        <el-form :model="formData" ref="formRef" :rules="formRules" label-width="80px" label-position="top" :inline="true"
            size="default">
            <el-tabs v-model="activeName">
                <el-tab-pane label="投诉内容" name="first">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item prop="community_code" label="所属小区">
                                <el-select disabled clearable v-model="formData.community_code">
                                    <el-option v-for="item in buildList" :key="item.id" :label="item.name"
                                        :value="item.code"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="title" label="投诉名称">
                                <el-input disabled v-model="formData.title"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="tel" label="联系方式">
                                <el-input disabled v-model="formData.tel"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="is_anonymity" label="是否匿名">
                                <el-radio-group disabled v-model="formData.is_anonymity" class="ml-4">
                                    <el-radio v-for="(item, index) in complainStatusList" :key="index" :label="item.value"
                                        size="default">{{
                                            item.label }}</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="reason" label="投诉事由">
                                <el-input disabled type="textarea" v-model="formData.reason"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="an_photo" label="问题图片">
                                <ImagePreview :width="180" :src="formData.an_photo"></ImagePreview>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-tab-pane>

                <el-tab-pane label="回复信息" name="second">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item prop="status" label="处理状态">
                                <el-radio-group v-model="formData.status" class="ml-4">
                                    <el-radio v-for="(item, index) in repairStatusList" :key="index" :label="item.value"
                                        size="default">{{
                                            item.label }}</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="qu_photo" label="回复图片">
                                <ImageUpload :limit="2" v-model="formData.qu_photo" :type="'adv'"></ImageUpload>
                            </el-form-item>
                        </el-col>
                        <el-form-item prop="reply" label="回复内容">
                            <QuillEditor v-model:content="formData.reply" contentType="html" ref="quillRef" />
                        </el-form-item>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </el-form>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="isShow = false">取消</el-button>
                <el-button type="primary" size="default" @click="onSubmit">确定</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<style  scoped>
:deep(.ql-toolbar) {
    width: 500px;
}

:deep(.ql-container) {
    height: 200px;
    width: 500px;
}
</style>